<template>
	<view class="homePage">
		<view class="timeBox">
			<view class="left">
				<image @click="backHome" src="../../static/images/home.png" mode="widthFix"></image>
			</view>
			<view class="">
				<span class="time">{{formattedTime}}</span>
				<span class="day">{{nowDay}}</span>
			</view>

		</view>
		<!-- <span @click="toInfo" style="color: #fff;font-size: 100px;">详情</span> -->
		<view class="mainPage">
			<view class="leftBtns">
				<view class="leftAnNiu">
					
					<view class="li">
						<image src="../../static/icons/icon3.png" mode="heightFix"></image>
						<span>检修</span>
					</view>
					<view class="li">
						<image src="../../static/icons/icon4.png" mode="heightFix"></image>
						<span>维护</span>
					</view>
					<view class="li">
						<image src="../../static/icons/icon5.png" mode="heightFix"></image>
						<span>保养</span>
					</view>
					<view class="li">
						<image src="../../static/icons/icon6.png" mode="heightFix"></image>
						<span>点检</span>
					</view>
					<view class="li">
						<image src="../../static/icons/icon7.png" mode="heightFix"></image>
						<span>上刀</span>
					</view>
					<view class="li">
						<image src="../../static/icons/icon8.png" mode="heightFix"></image>
						<span>下刀</span>
					</view>
				</view>
				<view class="lastAnniu">
					<!-- <view class="btncheck">
						<view class="btn">
							<image src="../../static/icons/icon7.png" mode="widthFix"></image>
							<span>上刀</span>
						</view>
						<view class="btn xiadao">
							<image src="../../static/icons/icon8.png" mode="widthFix"></image>
							<span>下刀</span>
						</view>
					</view> -->
					<view class="btncheck">
						<view class="btn chakan">
							<image src="../../static/icons/icon9.png" mode="widthFix" style="width: 60rpx;"></image>
							<span>查看</span>
						</view>
					</view>
				</view>
			</view>
			<view class="table">
				<view class="list tableHader">
					<view style="width: 10%;">序列</view>
					<view style="width: 23%;">机台号</view>
					<view style="width: 23%;">工单号</view>
					<view style="width: 20%;">品名</view>
					<view style="width: 10%;">数量</view>
					<view style="width: 14%;">操作</view>
				</view>
				<view class="MianTextTable hidden-scrollbar">
					<view class="list" v-for="(item,index) in tasklist" :key="index">
						<view style="width: 10%;">{{index+1}}</view>
						<view style="width: 23%;">{{item.dispatchfacilityname}}</view>
						<view style="width: 23%;">{{item.dispatchno}}</view>
						<view style="width: 20%;">{{item.itemname}}</view>
						<view style="width: 10%;">{{parseInt(item.dispatchqty)}}</view>
						<view style="width: 14%;">
							<span class="btn" v-if="!isString" @click="start(item)">开始</span>
							<span v-if="item.strdate && isString && !item.enddate" @click="toInfo(item)" class="btn" style="background-color: #1392ff;">查看</span>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	var dayjs = require('dayjs')

	export default {
		components: {

		},
		data() {
			return {
				tasklist: [],
				topic: 'topic',
				nowDay: '',
				formattedTime: '00:00',
				timeer: null,
				isString:false  // 是否有工单进行中
			};
		},
		onLoad() {
			this.timeer = setInterval(() => {
				this.getTime()
				this.getNowDay()
			}, 1000)
			
			// 连接MQTT
			// this.startConnect()
		},
		onShow() {
			// 工单列表
			this.getData()
		},
		methods: {
			getData() {
				let data = {
					facilitycode: uni.getStorageSync('machineNo'),
				}
				this.$api.gettaskbill(data).then(res => {
					if(res.result.length>0){
						res.result.forEach(item=>{
							if(item.strdate && !item.enddate){
								this.isString = true
							}
						})
					}
					
					this.tasklist = res.result
				})
			},
			getTime() {
				const now = new Date();

				const hours = ('0' + now.getHours()).slice(-2);
				const minutes = ('0' + now.getMinutes()).slice(-2);

				this.formattedTime = hours + ':' + minutes
			},
			// 显示右上角天
			getNowDay() {
				const weekday = dayjs().day();
				const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				const hour = dayjs().hour()
				var str = ''
				if (hour >= 0 && hour < 12) {
					str = '上午';
				} else {
					str = '下午';
				}
				this.nowDay = dayjs().format('MM月DD日') + weekdays[weekday] + str
			},
			toInfo(item) {
				uni.navigateTo({
					url: `/pages/info/index?itemno=${item.itemno}&id=${item.id}`
				})
			},
			startConnect() {

				let client = this.$mqtt.connect();

				client.on('connect', (res) => {
					console.log('连接成功');
					this.$mqtt.subscribe({
						topic: this.topic,
						qos: 0
					}).then((response) => {
						console.log("订阅响应", response);
					})
				}).on('reconnect', (res) => {
					console.log('重连', res);
				}).on('error', () => {
					console.log('报错');
				}).on('end', () => {
					console.log('断连');
				}).on('error', (error) => {
					console.log('连接失败...', error)
				}).on('end', () => {
					console.log('连接断开')
				}).on('message', (topic, message) => {
					//如果mqtt订阅主题成功，那么这里就是当接收到自己订阅主题的处理逻辑
					try {
						let data = JSON.parse(message)

						console.log('接收推送信息:', data)
					} catch (e) {
						console.log("Caught: " + e.message)
					}
				})

			},
			send() {
				let message = JSON.stringify('{true:1}')
				this.$mqtt.publish({
					topic: this.topic,
					message: message
				})
			},
			backHome() {
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},
			start(item) {
				uni.showModal({
					title: '提示',
					content: "是否确认开始？",
					success: (res) => {
						if (res.confirm) {
							this.$api.updateToStart({id:item.id}).then(res=>{
								console.log(res)
								this.toInfo(item)
							})
						} 
					}
				})
			}

		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-image: url("../../static/images/loginbg.png");
		background-size: 100% 100%;
	}

	.homePage {
		height: 100vh;
		width: 100%;
		box-sizing: border-box;
		padding: 40rpx 50rpx;

		.timeBox {
			color: #fff;
			display: flex;
			align-items: center;
			margin-bottom: 50rpx;
			justify-content: space-between;

			.left {
				padding-left: 40rpx;
			}

			image {
				width: 60rpx;
				height: auto;
			}

			.time {
				font-size: 75rpx;
				margin-right: 30rpx;
			}

			.day {
				font-size: 36rpx;
			}
		}

		.mainPage {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.leftBtns {
				width: 33%;
				// height: 75vh;
				height: 1000rpx;

				.leftAnNiu {
					background-image: url('../../static/images/indexleft.png');
					width: 100%;
					height: 79%;
					background-size: 100% 100%;
					display: flex;
					flex-wrap: wrap;
					color: #fff;

					.li {
						width: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;

						image {
							height: 70rpx;
							width: auto;
							margin-bottom: 6rpx;
						}
					}
				}

				.lastAnniu {
					margin-top: 110rpx;

					.btncheck {
						margin-top: 60rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.btn {
							width: 48%;
							height: 100rpx;
							background-image: url("../../static/icons/btnbg1.png");
							background-size: 100% 100%;
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								width: 65rpx;
								height: auto;
								margin-right: 15rpx;
								transform: translateY(4rpx);
							}

							span {
								color: #fff;
								font-size: 36rpx;
							}
						}

						.xiadao {
							background-image: url("../../static/icons/btnbg2.png");
						}

						.chakan {
							width: 100% !important;
							background-image: url("../../static/icons/btnbg3.png");
						}
					}
				}
			}

			.table {
				width: 65%;
				background-image: url('../../static/images/indexTable.png');
				background-size: 100% 100%;
				height: 1000rpx;
				position: relative;



				.list {
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid rgba(255, 255, 255, 0.10);

					view {
						width: 16.6%;
						height: 100%;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 0 3px;
						text-align: center;
					}

					.btn {
						background-color: #cb653e;
						padding: 10rpx 20rpx;
						border-radius: 10rpx;

					}
				}

				.MianTextTable {
					overflow-y: scroll;
					height: calc(1155rpx - 130rpx);

					.list {
						height: auto;
						padding: 20rpx 0;
					}
				}

				.tableHader {
					height: 120rpx;
					border: none;
					position: sticky;
					top: 0;
					z-index: 10;
					view{
						text-align: center;
					}
				}
			}
		}
	}
</style>